<template>
  <div class="view-container">
    <div class="filter-container">
      <el-row :gutter="40">
        <el-col :lg="24">
          <el-form :inline="true" :model="queryParams" label-position="right" size="small" class="filter-form-inline">
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <el-col :lg="6" :xs="5">
                <el-form-item label="兼职状态" style="width: 100%">
                  <el-select v-model="queryParams.tradeStatus" clearable style="width: 100%" placeholder="请选择兼职状态">
                    <el-option label="全部" value="" />
                    <el-option label="准兼职" value="-1" />
                    <el-option label="正式兼职" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="6" :xs="5">
                <el-form-item label="关键字" style="width: 100%">
                  <el-input
                    v-model="queryParams.keyWord"
                    clearable
                    placeholder="输入名称、编号、电话号码"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="6" :xs="5">
                <el-form-item style="width: 100%">
                  <el-button type="text" size="mini" style="color: #417ff9" @click="visible = !visible">
                    更多搜索
                    <i v-if="visible" class="iconfont icon-xiajiantou" style="margin-left:3px;font-size: 8px;" />
                    <i v-if="!visible" class="iconfont icon-shangjiantou" style="margin-left:3px;font-size: 8px;" />
                  </el-button>
                  <el-button class="border-btn" @click="handlReset">重置</el-button>
                  <el-button type="primary" class="main-btn" @click="handlSearch">搜索</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="40" style="margin-left: 0px; margin-right: 0px">
              <template v-if="visible">
                <el-col :lg="6" :xs="5">
                  <el-form-item label="数据状态" style="width: 100%">
                    <el-select v-model="queryParams.agentStatus" clearable style="width: 100%" placeholder="请选择数据状态">
                      <el-option
                        v-for="item in agentStatusData"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :lg="6" :xs="5">
                  <el-form-item label="兼职级别" style="width: 100%">
                    <el-select v-model="queryParams.agentLevel" clearable style="width: 100%" placeholder="请选择数据状态">
                      <el-option
                        v-for="item in agentPersonLevel"
                        :key="item.id"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :lg="6" :xs="5">
                  <el-form-item label="时间范围">
                    <date-range-picker
                      v-model:date="date"
                      style="width: 100%"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      @change="handlDate"
                    />
                  </el-form-item>
                </el-col>
              </template>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </div>

    <div class="main-content" style="padding-top:0 ">
      <div class="list-container">
        <!--        <table-tools>-->
        <!--          <template #left>-->
        <!--            <el-button class="main-btn" size="small" type="primary" @click="handlNew">新建</el-button>-->
        <!--          </template>-->
        <!--        </table-tools>-->
        <table-view
          :data="tableData"
          header-cell-class-name="table-header"
          size="medium"
          border
          :cell-style="cellStyle"
          @row-click="aloneClick"
        >
          <el-table-column prop="agentNumber" label="人员编号" header-align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="userName" label="姓名" header-align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="tel" label="联系电话" align="center" :show-overflow-tooltip="true" />
          <el-table-column prop="tel" label="兼职级别" align="center" :show-overflow-tooltip="true">
            <template #default="{row}">
              {{ getLabel('agent_person_level', row.agentLevel) }}
            </template>
          </el-table-column>
          <el-table-column prop="createdAt" label="创建时间" align="center" :show-overflow-tooltip="true">
            <template #default="{row}">
              {{ dateFormat("yyyy-mm-dd HH:MM:SS",row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="terminalStatus" label="兼职状态" align="center" :show-overflow-tooltip="true">
            <template #default="{row}">
              <span v-if="row.tradeStatus === ''">准兼职</span>
              <span v-if="row.tradeStatus === '1'">正式兼职</span>
            </template>
          </el-table-column>
          <el-table-column prop="terminalStatus" label="数据状态" align="center" :show-overflow-tooltip="true">
            <template #default="{row}">
              {{ getLabel('agent_status_person', row.agentStatus) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="{row}">
              <el-button type="text" @click="handlEdit(row.id)">变更信息
              </el-button>
            </template>
          </el-table-column>
        </table-view>
        <Pagination
          v-model:page="queryParams.page"
          v-model:limit="queryParams.pageSize"
          style="display: flex; justify-content: flex-end"
          :total="total"
          @pagination="handlList"
        />
      </div>

      <!--新建-->
      <formPersonnel ref="formPersonnel" @succsess="succsess" />
    </div>

  </div>
</template>

<script>
import {defineAsyncComponent, inject, onMounted, reactive, toRefs} from 'vue'
import {useRouter} from 'vue-router'
import {crmStore} from '@CRM/store'

export default {
  name: 'Index',
  components: {
    formPersonnel: defineAsyncComponent(() => import('../modules/partTimeBigBag/formPersonnel.vue'))
  },
  setup() {
    const api = inject('api')
    const router = useRouter()
    var data = reactive({
      queryParams: {
        agentStatus: '',
        tradeStatus: '',
        agentLevel: '',
        keyWord: '',
        pageSize: 20,
        page: 1
      },
      date: [],
      tableData: [],
      agentStatusData: crmStore.getters['dictionary/getDictionary']['agent_status_person'],
      agentPersonLevel: crmStore.getters['dictionary/getDictionary']['agent_person_level'],
      total: 0,
      formPersonnel: null,
      visible: false
    })

    // 新建
    const handlNew = () => {
      data.formPersonnel.open(null, 1)
    }

    const handlDate = (val) => {
      if (val) {
        data.queryParams.startTime = val[0]
        data.queryParams.endTime = val[1]
      }
    }

    // 获取列表
    const handlList = () => {
      api.channelAgent.PARTTIMEBIGBAG_LIST(data.queryParams).then(res => {
        if (res.code === 0) {
          data.tableData = res.data.list || []
          data.total = res.data.total
        }
      })
    }

    const handlEdit = (row) => {
      data.formPersonnel.open(row, 2)
    }

    // 搜索
    const handlSearch = () => {
      data.queryParams.page = 1
      handlList()
    }

    // 重置
    const handlReset = () => {
      data.queryParams = {
        agentStatus: '',
        tradeStatus: '',
        agentLevel: '',
        keyWord: '',
        pageSize: 20,
        page: 1
      }
      data.date = ''
      handlList()
    }

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === '操作' || column.label === '查看文件') return
      router.push({
        path: '/channel/partTimeBigBagDetail',
        query: { id: row.id }
      })
    }
    // 刷新列表
    const succsess = () => {
      handlList()
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    // 页码
    const pagination = () => {

    }

    //* *********************************
    onMounted(() => {
      handlList()
    })
    //* *********************************

    return {
      ...toRefs(data),
      handlNew,
      aloneClick,
      cellStyle,
      pagination,
      handlList,
      handlReset,
      handlSearch,
      succsess,
      handlEdit,
      handlDate
    }
  }
}

</script>

<style scoped>
  /* @import url(); 引入css类 */
</style>
